<template>
  <div>
      <el-row :gutter="20">
          <el-col :span="12"><div class="grid-content ep-bg-purple" />
              <el-card class="box-card">
                  <template #header>
                      <div class="card-header">
                          <span>GIn-vue-admin</span>
                      </div>
                  </template>
                  <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
              </el-card>

              <el-card class="box-card">
                  <template #header>
                      <div class="card-header">
                          <span>GIn-vue-admin</span>
                      </div>
                  </template>
                  <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
              </el-card>

          </el-col>

          <el-col :span="12"><div class="grid-content ep-bg-purple" />

              <el-card class="box-card2">
                  <template #header>
                      <div class="card-header">
                          <span>GIn-vue-admin</span>
                      </div>
                  </template>

                  <el-timeline>
                      <el-timeline-item timestamp="2023/5/16" placement="top">
                          <el-card>
                              <h4>Update V 1.0</h4>
                              <p>Wangzonglong 初始版本开发完成</p>
                          </el-card>
                      </el-timeline-item>
                      <el-timeline-item timestamp="2018/4/3" placement="top">
                          <el-card>
                              <h4>Update Github template</h4>
                              <p>Tom committed 2018/4/3 20:46</p>
                          </el-card>
                      </el-timeline-item>
                      <el-timeline-item timestamp="2018/4/2" placement="top">
                          <el-card>
                              <h4>Update Github template</h4>
                              <p>Tom committed 2018/4/2 20:46</p>
                          </el-card>
                      </el-timeline-item>

                      <el-timeline-item timestamp="2018/4/12" placement="top">
                          <el-card>
                              <h4>Update Github template</h4>
                              <p>Tom committed 2018/4/12 20:46</p>
                          </el-card>
                      </el-timeline-item>
                      <el-timeline-item timestamp="2018/4/3" placement="top">
                          <el-card>
                              <h4>Update Github template</h4>
                              <p>Tom committed 2018/4/3 20:46</p>
                          </el-card>
                      </el-timeline-item>
                      <el-timeline-item timestamp="2018/4/2" placement="top">
                          <el-card>
                              <h4>Update Github template</h4>
                              <p>Tom committed 2018/4/2 20:46</p>
                          </el-card>
                      </el-timeline-item>

                      <el-timeline-item timestamp="2018/4/12" placement="top">
                          <el-card>
                              <h4>Update Github template</h4>
                              <p>Tom committed 2018/4/12 20:46</p>
                          </el-card>
                      </el-timeline-item>
                      <el-timeline-item timestamp="2018/4/3" placement="top">
                          <el-card>
                              <h4>Update Github template</h4>
                              <p>Tom committed 2018/4/3 20:46</p>
                          </el-card>
                      </el-timeline-item>
                      <el-timeline-item timestamp="2018/4/2" placement="top">
                          <el-card>
                              <h4>Update Github template</h4>
                              <p>Tom committed 2018/4/2 20:46</p>
                          </el-card>
                      </el-timeline-item>

                      <el-timeline-item timestamp="2018/4/12" placement="top">
                          <el-card>
                              <h4>Update Github template</h4>
                              <p>Tom committed 2018/4/12 20:46</p>
                          </el-card>
                      </el-timeline-item>
                      <el-timeline-item timestamp="2018/4/3" placement="top">
                          <el-card>
                              <h4>Update Github template</h4>
                              <p>Tom committed 2018/4/3 20:46</p>
                          </el-card>
                      </el-timeline-item>
                      <el-timeline-item timestamp="2018/4/2" placement="top">
                          <el-card>
                              <h4>Update Github template</h4>
                              <p>Tom committed 2018/4/2 20:46</p>
                          </el-card>
                      </el-timeline-item>


                  </el-timeline>


              </el-card>




          </el-col>
      </el-row>
  </div>

</template>


<style>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 90%;
    margin: 5%;
    height: 350px;
}
.box-card2 {
    width: 90%;
    margin: 5%;
}

</style>
<script setup>
</script>